<template>
  <div class=''>
    <h3 class="pb-3 mb-4 border-bottom">文章列表</h3>
    <div class="blog-post" v-for="(item, index) in datas" :key="index">
      <h4 class="blog-post-title">{{item.title}}</h4>
      <p class="blog-post-meta">
        {{item.date}}
        <span class="ml-5">分类：</span>
        <a href="#">{{item.mark}}</a></p>
      <p>{{item.desc}}</p>
      <hr>
    </div>
    <el-pagination background layout="prev, pager, next" :total="1000" class="text-center mb-5" :pager-count="4">
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: 'blog-list',
  title: '文章列表',
  data() {
    return {
      datas: new Array(10).fill({
        title: 'Sample blog post',
        date: '2019-05-06 12:32:54',
        mark: 'Object, Arrary',
        desc: `This blog post shows a few different types of content that's supported and styled with
                Bootstrap. Basic typography, images, and code are all supported.`
      })
    }
  }
}
</script>
<style lang = 'scss'>
</style>